<template>
    <view style="height: 100%">
        <view class="record-wrap">
            <view class="record-wrap__head">
                <view class="head-search flex-row-between">
                    <view class="head-search__title" @tap="showSearchPopup">{{ tabsColumns[0][tabsIndex] }}</view>
                    <view class="head-search__title" @tap="showDatePopup">
                        {{ dateText }}
                    </view>
                </view>
                <view class="invite-nums flex-row-start">
                    <image class="invite-nums__icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/pic.png"></image>
                    <view class="invite-nums__right">
                        <view class="invite-nums__title">成功邀请{{ InviteTotal.inviteUserCount || 0 }}人</view>
                        <view class="invite-nums__desc1">
                            <!-- <text>获得</text>
                            <text class="hit">
                                优惠券{{ InviteTotal.couponAmount || 0 }}元/积分{{ InviteTotal.integral || 0 }}分/奖励金{{ InviteTotal.bountyAmount || 0 }}元/免服务费{{
                                    InviteTotal.freeServiceFeeCount || 0
                                }}次
                            </text> -->
                            <text class="hit">
								<template v-if="InviteTotal.bountyAmount">奖励金{{ InviteTotal.bountyAmount || 0 }}元、</template>
								<template v-if="InviteTotal.integral">积分{{ InviteTotal.integral || 0 }}分、</template>
								<template v-if="InviteTotal.rewardCouponCount">优惠券{{ InviteTotal.rewardCouponCount || 0 }}张、</template>
								<template v-if="InviteTotal.rewardCardCount">卡{{ InviteTotal.rewardCardCount || 0 }}张、</template>
								<template v-if="InviteTotal.rewardEquityCount">权益{{ InviteTotal.rewardEquityCount || 0 }}张</template>
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="record-wrap__list" v-if="inviteDataList.length">
                <view class="record_list">
                    <view class="list_item" v-for="(item, index) in inviteDataList" :key="index">
                        <view class="item_top flex-row-between">
                            <view class="title flex-row-start">
                                <view class="title-name">{{ item.invitePlUserName }}</view>
                                <view class="status" v-if="item.joinType == 1">注册</view>
                                <view class="status" v-if="item.joinType == 2">首次消费</view>
                                <view class="status" v-if="item.joinType == 3">首次充值</view>
                            </view>
                            <view class="date">{{ item.joinTime }}</view>
                        </view>

                        <view class="item_bottom">
                            <text v-if="item.integral">
                                <text class="text">{{ item.integral }}</text>
                                积分、
                            </text>
                            <text v-if="item.couponAmount">
                                <text class="text">{{ item.couponAmount }}</text>
                                元优惠券、
                            </text>
                            <text v-if="item.couponCount">
                                优惠券<text class="text">{{ item.couponCount }}</text>
                                张、
                            </text>
                            <text v-if="item.bountyAmount">
                                <text class="text">{{ item.bountyAmount }}</text>
                                元奖励金、
                            </text>
                            <text v-if="item.freeServiceFeeCount">
                                <text class="text">{{ item.freeServiceFeeCount }}</text>
                                次免服务费
                            </text>
                        </view>
                    </view>
                </view>
            </view>
            <Upgrading text="暂无数据" v-else></Upgrading>
        </view>

        <!-- <u-popup :show="showTime" position="bottom" custom-style="width:702rpx;margin:24rpx;border-radius: 16rpx;" @close="onClose">
            <u-datetime-picker type="year-month" :value="currentDate" @input="onInput" @cancel="onCancel" @confirm="onConfirm" />
        </u-popup> -->

        <u-datetime-picker :show="showTime" mode="year-month" v-model="currentDate" @cancel="onCancel" @confirm="onConfirm" />

        <!-- <u-popup duration="100" :show="searchPopup" position="top" custom-style="width:702rpx;margin:120rpx 24rpx 0;border-radius: 16rpx;" @close="closeSearchPopup">
            <view class="search-popup">
                <view :class="'title flex-row-center ' + (tabsIndex == index && 'on')" :data-index="index" @tap="changeTabsIndex" v-for="(item, index) in tabs" :key="index">
                    {{ item }}
                </view>
            </view>
        </u-popup> -->

        <u-picker :show="searchPopup" :columns="tabsColumns" @cancel="closeSearchPopup" @confirm="changeTabsIndex"></u-picker>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// import vanDatetimePicker from './@vant/weapp/datetime-picker/index';
// import vanPopup from './@vant/weapp/popup/index';
import Upgrading from '@/marketing_page/components/upgrading/upgrading.vue';
// marketing/pages/promotion/promotion_record/promotion_record.ts
import { formatYMTime } from '../../../../utils/util';
import { userInviteRecord, userInviteTotal } from '../../../../api/marketing/invitation';

const dayjs = require('@/utils/dayjs.min.js');

export default {
    components: {
        // vanDatetimePicker,
        // vanPopup,
        Upgrading
    },
    data() {
        return {
            currentDate: new Date().getTime(),
            showTime: false,
            dateText: '请选择时间',
            searchPopup: false,
            config: {
                current: 1,
                rewardType: '',
                size: 10,
                userId: uni.getStorageSync('memberId'),
                yearMonth: ''
            },
            InviteTotal: {
                inviteUserCount: '',
                couponAmount: '',
                integral: '',
                bountyAmount: '',
                freeServiceFeeCount: ''
            },
            inviteDataList: [],
            // tabs: ['全部', '免服务费', '优惠券', '奖励金', '积分'],

            tabsColumns: [
                // ['全部', '优惠券', '奖励金', '积分', '卡', '权益']
                ['全部', '优惠券', '奖励金']
            ],
            tabsIndex: 0,
            rewardEquityCount: ""
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(e: any) {
        if (e.activityNumber) {
            this.config.activityNumber = e.activityNumber;
        }
        this.userInviteRecord();
        this.userInviteTotal();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        this.userInviteRecord();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        async userInviteRecord() {
            try {
                const res = await userInviteRecord(this.config);
                this.config.current++;
                let data = res.data.records || [];
                data.forEach((item: any) => {
                    item.joinTime = item.joinTime.split(' ')[0];
                });

                this.inviteDataList = [...this.inviteDataList, ...data]
          
            } catch (error) {}

            console.log(this.inviteDataList,'this.inviteDataList')
        },

        async userInviteTotal() {
            try {
                const res = await userInviteTotal({
                    userId: uni.getStorageSync('memberId'),
                    activityNumber: this.config.activityNumber
                });
                this.setData({
                    InviteTotal: res.data
                });
                console.log(res, '这是总计');
            } catch (error) {}
        },

        changeTabsIndex(e: any) {
            console.log('confirm', e)
            const tabsIndex = e.indexs[0];
            console.log(tabsIndex, 'tabsIndex')
            this.setData({
                tabsIndex,
                searchPopup: false
            });
            this.resetConfig();
            // let config = this.config;
            // config.rewardType = tabsIndex || '';

            // 0==全部
            // 2==优惠券
            // 3==奖励金
            // 4==积分
            // 5==卡
            // 6==权益
            if(tabsIndex==0){
                this.config.rewardType = 0
            }else if(tabsIndex==1){
                this.config.rewardType = 2
            }else if(tabsIndex==2){
                this.config.rewardType = 3
            }else if(tabsIndex==3){
                this.config.rewardType = 4
            }else if(tabsIndex==4){
                this.config.rewardType = 5
            }else if(tabsIndex==5){
                this.config.rewardType = 6
            }

            // this.setData({
            //     config
            // });
            this.userInviteRecord();
        },

        resetConfig() {
            this.config.current = 1;
            this.inviteDataList = [];
        },

        closeSearchPopup() {
            this.setData({
                searchPopup: false
            });
        },

        showDatePopup() {
            this.setData({
                showTime: true
            });
        },

        showSearchPopup() {
            this.setData({
                searchPopup: true
            });
        },

        onInput(event: any) {
            this.setData({
                currentDate: event.detail
            });
        },

        onCancel() {
            this.setData({
                showTime: false
            });
        },

        onConfirm(event: any) {
            console.log(event);
            let dateString = event.value;//时间戳
            // this.dateText = uni.$u.timeFormat(dateString, 'yyyy年mm月')
            // this.config.yearMonth = uni.$u.timeFormat(dateString, 'yyyymm')

            this.dateText = dayjs(dateString).format('YYYY年MM月')
            this.config.yearMonth = dayjs(dateString).format('YYYYMM')


            this.resetConfig();
            this.showTime = false;
            this.userInviteRecord();
        },

        onClose() {
            console.log('占位：函数 onClose 未声明');
        }
    }
};
</script>
<style lang="less">

@import "../../../../commin/commin.less";
@import "../../../../commin/flex.less";


page {
    background: #f5f7fa;
}
.record-wrap {
    padding: 0 24rpx;
    padding-top: 120rpx;
}
.record-wrap .record-wrap__head {
    padding-bottom: 16rpx;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background: #f5f7fa;
    padding: 0 24rpx 16rpx;
    box-sizing: border-box;
}
.record-wrap .record-wrap__head .head-search {
    height: 112rpx;
    padding: 0 33rpx;
}
.record-wrap .record-wrap__head .head-search__title {
    font-size: 34rpx;
    font-weight: bold;
    color: #18181a;
    position: relative;
    padding-right: 50rpx;
}
.record-wrap .record-wrap__head .head-search__title::after {
    border: 12rpx solid transparent;
    border-color: #909399 transparent transparent transparent;
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
}
.record-wrap .record-wrap__head .head-tabs {
    height: 106rpx;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    padding: 0 40rpx;
    line-height: 1;
}
.record-wrap .record-wrap__head .head-tabs__item .count {
    font-size: 30rpx;
    font-weight: bold;
    color: #1487fa;
    margin-bottom: 18rpx;
}
.record-wrap .record-wrap__head .head-tabs__item .title {
    font-size: 24rpx;
    color: #606266;
}
.record-wrap .record-wrap__list {
    margin-top: 180rpx;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    box-sizing: border-box;
    border-radius: 16rpx;
    padding: 0rpx 32rpx;
}
.record-wrap .record-wrap__list .record_list .list_item {
    padding: 36rpx 0;
    border-bottom: 1rpx dotted #c0c4cc;
}
.record-wrap .record-wrap__list .record_list .list_item:last-child {
    border: 0;
}
.record-wrap .record-wrap__list .record_list .list_item .item_top {
    margin-bottom: 22rpx;
}
.record-wrap .record-wrap__list .record_list .list_item .item_top .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #303133;
}
.record-wrap .record-wrap__list .record_list .list_item .item_top .status {
    height: 32rpx;
    background: rgba(20, 135, 250, 0);
    border: 1rpx solid rgba(20, 135, 250, 0.8);
    border-radius: 16rpx;
    font-size: 22rpx;
    color: #1487fa;
    margin-left: 16rpx;
    padding: 0 10rpx;
}
.record-wrap .record-wrap__list .record_list .list_item .item_top .date {
    font-size: 24rpx;
    font-weight: 400;
    color: #606266;
}
.record-wrap .record-wrap__list .record_list .list_item .item_bottom {
    font-size: 26rpx;
    color: #fc724c;
}
.record-wrap .record-wrap__list .record_list .list_item .item_bottom text {
    font-weight: bold;
}
.invite-nums {
    height: 153rpx;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-bottom: 10rpx;
    margin-top: 10rpx;
    line-height: 1;
    padding: 0 24rpx;
}
.invite-nums__icon {
    width: 108rpx;
    height: 92rpx;
    margin-right: 16rpx;
}
.invite-nums__title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #72c23d;
    margin-bottom: 23rpx;
}
.invite-nums__right {
    font-size: 22rpx;
    font-weight: 500;
    color: #606266;
}
.invite-nums__right .hit {
    color: #fc724c;
}
.search-popup {
    height: 200rpx;
    display: grid;
    grid-template-rows: 100rpx 100rpx;
    grid-template-columns: 186rpx repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    padding: 6rpx 10rpx;
    box-shadow: 3rpx 5rpx 20rpx 0px rgba(192, 196, 204, 0.5);
}
.search-popup .title {
    height: 100%;
    font-size: 28rpx;
    color: #606266;
}
.search-popup .title.on {
    font-weight: bold;
    color: #1487fa;
}
.search-popup .title:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    border-right: 1rpx solid #dcdfe6;
    margin-right: 10rpx;
}
.search-popup .title:nth-child(2) {
    border-bottom: 1rpx solid #dcdfe6;
}
.search-popup .title:nth-child(3) {
    border-bottom: 1rpx solid #dcdfe6;
}
</style>
